<script>
import bindUserAddDialog from "/src/views/manage/iot/project/components/BindUserAddDialog.vue";
import UserAccountIn from "/src/views/manage/iot/project/components/UserAccountIn.vue";

export default {
  components:{
    UserAccountIn,
    bindUserAddDialog
  },
  data() {
    return {
      show:false,
      project:{
        id:null
      },
      projectUserAccounts:[],
      userAccounts:[],
      loading: true
    }
  },
  mounted(){
  },
  methods:{
    open(item){
      this.project = item;
      this.getByProjectId();
      this.show = true;
    },
    close(){
      this.show = false;
      this.project = {
        id:null
      };
    },
    toRemove(item){
      // 是否确定删除,
      this.$confirm(this.$i18n.zhToGlobal('是否确定解绑？'), this.$i18n.zhToGlobal('提示'), {
        confirmButtonText: this.$i18n.zhToGlobal('确定'),
        cancelButtonText: this.$i18n.zhToGlobal('取消'),
        type: 'warning',
      }).then(() => {
        this.loading=true;
        this.$kt.request.send({
          uri: "/business-iot-web/admin/projectUserAccount/remove",
          data: {
            id: item.id
          },
          stateSuccess: (res) => {
            this.getByProjectId();
          },
          stateFail: (err) => {
            this.$message.error(err.errMsg);
          }
        })
      })
    },
// /business-iot-web/projectUserAccount/getByProjectId
    getByProjectId(){
      this.loading = true;
      this.$kt.request.send({
        uri: "/business-iot-web/projectUserAccount/getByProjectId",
        data: {
          projectId: this.project.id
        },
        stateSuccess: (res) => {
          // console.log(res)
          this.projectUserAccounts = res.data;
          let ids = res.data.map(item => item.userAccountId);
          console.log(JSON.stringify(ids))
          // //user-account-web/userAccount/getByIds
          this.$kt.request.send({
            uri: "/user-account-web/userAccount/getByIds",
            data: {
              ids: ids
            },
            stateSuccess: (res) => {
              this.userAccounts = res.data;
              this.loading = false;
              console.log(JSON.stringify(this.userAccounts));
            },
            stateFail: (err) => {
              this.$message.error(err.errMsg);
            }
          });


        },
        stateFail: (err) => {
          this.$message.error(err.errMsg);
        }
      });
    }
  }
}
</script>

<template>
<el-dialog
  draggable
  v-loading="loading"
  width="350px"
  :title="$i18n.zhToGlobal('绑定用户')+' - '+project?.title"
  v-model="show"
  @close="close">


  <el-scrollbar
      v-loading="loading"
      style="height: 300px">
    <div
        v-if="!loading&&(!userAccounts || userAccounts.length===0)"
        class="no-user">
      <div>{{$i18n.zhToGlobal('当前未绑定用户')}}</div>
    </div>
    <div v-for="(userAccount,index) in userAccounts"
         style="position:relative;"
    >
      <div style="height: 10px"></div>
      <user-account-in
          :user-account="userAccount"></user-account-in>
      <div>
        <el-button
        type="danger"
        size="small"
        @click="toRemove(projectUserAccounts[index])"
        style="color: #FFFFFF;position: absolute;top:0;right: 0">
          {{$i18n.zhToGlobal('解绑')}}
        </el-button>
        <div style="height: 20px"></div>
      </div>
      <div style="height: 10px"></div>
    </div>
  </el-scrollbar>

  <div>
    <el-button
    type="primary"
    @click="$refs.addDialog.open(project)"
    style="width: 100%"
    >{{$i18n.zhToGlobal('添加用户')}}</el-button>
  </div>

  <bind-user-add-dialog
      @save="getByProjectId()"
      ref="addDialog"></bind-user-add-dialog>
</el-dialog>
</template>

<style scoped lang="scss">

.no-user{
  padding: 30px 0;
  text-align: center;
}

</style>